<template>
  <div id="app"></div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
// const COLOR_LEVEL = [
//   'rgba(0,255,0,0.7)',
//   'rgba(255,255,255,0.7)',
//   'rgba(255,125,0,0.7)',
//   'rgba(255,0,0,0.7)',
//   'rgba(152,0,75,0.7)',
//   'rgba(178,24,43,0.7)',
// ];

import 'mapbox-gl-controls/lib/controls.css';
import axios from 'axios';

export default {
  data() {
    return {
      // 历史数据
      historyData: null,
      // map 地图对象实例
      map: null,
    };
  },
  mounted() {
    this._createBaseMap();
  },
  methods: {
    _createBaseMap() {
      mapboxgl.accessToken =
        'pk.eyJ1IjoiaW54bG54IiwiYSI6ImNsMzRmZDE4dTBhOWczaWs3a2psanphMnUifQ.iKIlYhNlW_13OqBJLOc9sw';

      console.time('mapRender');
      const map = new mapboxgl.Map({
        container: 'app',
        //自己绘制的样式地图令牌
        antialias: true, //抗锯齿
        style: 'mapbox://styles/mapbox/dark-v10',
        center: [113.97923191113188, 22.589860256941634],
        // center: [ -16.06102635228848,  84.93125123478856],
        zoom: 12,
      });

      map.on('idle', () => {
        console.timeEnd('mapRender');
      });

      this.map = map;
      window.map = map;

      // function metersToPixelsAtMaxZoom(meters, latitude) {
      //   return meters / 0.075 / Math.cos((latitude * Math.PI) / 180);
      // }

      // const featureTemplate = {
      //   type: 'Feature',
      //   geometry: {
      //     type: 'Point',
      //     coordinates: [114.1063, 22.5545],
      //   },
      //   properties: {
      //     POI_ID: 'CNA1356',
      //     POI_NAME: '通心岭子站',
      //     location_ID: 101280601,
      //   },
      // };

      map.on('load', function () {
        axios.get('http://192.168.101.147:8081/protobf50/500').then((res) => {
          const { data } = res;

          const pointTemplate = {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                geometry: {
                  type: 'Point',
                  coordinates: [114.1063, 22.5545],
                },
                properties: {
                  POI_ID: 'CNA1356',
                  POI_NAME: '通心岭子站',
                  location_ID: 101280601,
                },
              },
            ],
          };

          pointTemplate.features = data.map((item) => {
            return {
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: [item.jd, item.wd],
              },
              properties: {
                ad_2: item.ad_2,
              },
            };
          });

          console.log('pointTemplate :>> ', pointTemplate);

          map.addSource('points-source', {
            type: 'geojson',
            data: pointTemplate,
          });

          map.addLayer({
            id: 'custom-geojson-tile-layer',
            type: 'circle',
            source: 'points-source',
            // 'source-layer': 'points',

            paint: {
              // Size circle radius by earthquake magnitude and zoom level  大小圈半径由 PM2.5 和缩放级别共同决定
              'circle-radius': 10,
              // 'circle-radius': {
              //   stops: [
              //     [0, 0],
              //     [20, _pixelRadius],
              //   ],
              //   base: 2,
              // },
              // Color circle by earthquake magnitude  用颜色标出 PM2.5 的污染程度
              'circle-color': 'skyblue',
              'circle-stroke-color': 'transparent',
              'circle-stroke-width': 0, // 圆点的边框大小
            },
            // paint: {
            //   'fill-color': 'orange',
            //   // "fill-translate-anchor":"map",
            //   // 'fill-pattern': 'pattern'
            // },
          });
        });

        // 添加矢量切片数据源
        // map.addSource('custom-vector-source', {
        //   type: 'vector',
        //   tileSize: 512,
        //   tiles: [
        //     // 'http://192.168.101.147:8081/tiles/{z}/{x}/{y}',
        //     // 'http://192.168.101.147:9080/pg_postgis_mvt/api/v1/{z}/{x}/{y}',
        //     'http://192.168.101.147:8081/tile/{z}/{x}/{y}',
        //     // 'http://192.168.101.147:8089/tile1/{z}/{x}/{y}',
        //   ],
        // });
        // 添加图层
        // map.addLayer({
        //   id: 'custom-vector-tile-layer',
        //   type: 'circle',
        //   source: 'custom-vector-source',
        //   'source-layer': 'points',

        //   paint: {
        //     // Size circle radius by earthquake magnitude and zoom level  大小圈半径由 PM2.5 和缩放级别共同决定
        //     'circle-radius': 10,
        //     // 'circle-radius': {
        //     //   stops: [
        //     //     [0, 0],
        //     //     [20, _pixelRadius],
        //     //   ],
        //     //   base: 2,
        //     // },
        //     // Color circle by earthquake magnitude  用颜色标出 PM2.5 的污染程度
        //     'circle-color': 'skyblue',
        //     'circle-stroke-color': 'transparent',
        //     'circle-stroke-width': 0, // 圆点的边框大小
        //   },
        //   // paint: {
        //   //   'fill-color': 'orange',
        //   //   // "fill-translate-anchor":"map",
        //   //   // 'fill-pattern': 'pattern'
        //   // },
        // });

        // map.addLayer({
        //   id: "text-layer",
        //   type: "symbol",
        //   source: "custom-vector-source",
        //   'source-layer': "points",
        //   //   paint: {
        //   //   // Size circle radius by earthquake magnitude and zoom level  大小圈半径由 PM2.5 和缩放级别共同决定
        //   //   'circle-radius':10,
        //   //   // Color circle by earthquake magnitude  用颜色标出 PM2.5 的污染程度
        //   //   'circle-color': 'skyblue',
        //   //   // 'circle-stroke-color': 'transparent',
        //   //   'circle-stroke-width': 5, // 圆点的边框大小
        //   // },
        //   layout: {
        //     "text-field":['get','j']
        //   }
        // });
      });

      // zoom变化时打印zoom值
      map.on('zoom', function (e) {
        console.log('zoom :>> ', e.target.getZoom());
      });
    },
  },
  beforeDestroy() {
    this.map.removeLayer('custom-vector-tile-layer');
    this.map.remove();
    this.map = null;
  },
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#app {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}

/* 将底部的logo和信息声明隐藏 */
.mapboxgl-ctrl-logo {
  display: none !important;
}
.mapboxgl-ctrl-bottom-right {
  display: none !important;
}

/* 弹出层样式 */
.mapboxgl-popup {
  padding-bottom: 5px;
}
/* 控制关闭按钮 */
.mapboxgl-popup-close-button {
  /* display: none; */
}
.mapboxgl-popup-content {
  font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
  padding: 0;
  width: 180px;
}
.mapboxgl-popup-content-wrapper {
  padding: 1%;
}
.mapboxgl-popup-content h3 {
  background: #91c949;
  color: #fff;
  margin: 0;
  display: block;
  padding: 10px;
  border-radius: 3px 3px 0 0;
  font-weight: 700;
  /* margin-top: -15px; */
}
.mapboxgl-popup-content h4 {
  margin: 0;
  display: block;
  padding: 10px;
  font-weight: 400;
}
.mapboxgl-popup-content div {
  padding: 10px;
}
.mapboxgl-container .leaflet-marker-icon {
  cursor: pointer;
}
.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
  margin-top: 15px;
}
.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
  border-bottom-color: #91c949;
}
</style>
